<template>
  <div class="">
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item name="mcbh" class="w-[300px]">
          <a-input v-model:value="formState.mcbh" placeholder="物品名称/助记码/编号" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2">
      <div class="flex mb-2">
        <BaseExport type="卫生" name="装备字典" code="000583">导出</BaseExport>
      </div>
      <BaseTable :data-source="tableData" fill :loading="loading" column-code="000696" :pagination="pagination">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex == 'yxzt'">
            <a-tag v-if="!record?.yxzt" color="green">有效</a-tag>
            <a-tag v-else color="red">有效</a-tag>
          </template>
          <template v-if="column.dataIndex === 'mc'">
            <MedicineInfo :value="{ mc: record.mc, gg: record.gg }" />
          </template>
          <template v-if="column.dataIndex === 'xmlb'">
            <p v-if="record.xmlb === 30">卫生材料</p>
            <p v-else-if="record.xmlb === 31">易耗品</p>
            <p v-else-if="record.xmlb === 32">固定资产</p>
            <p v-else>-</p>
          </template>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'

const formRef = ref(null)
const formState = ref({
  mcbh: '',
  materialType: 3
})

const { loading, tableData, getData, pagination } = useTable({
  url: '/operation/opex/getItemDictionaryList',
  immediate: true,
  params: formState.value
})
</script>
